<template>
  <div :class="$style.queue">
    <Icon :allow="allow" :src="src" :srcset="srcset" :orange="queueSize>0" :roll="queueSize>0" :text="text" @on-click="iconClickHandle" />
  </div>
</template>
<script>
import Icon from './Icon'
import beforeSign from './js/beforeSign.js'
import afterSign from './js/afterSign.js'
import dyn from './js/dyn.js'
import { mapGetters } from 'vuex'

export default {
  name: 'Queue',
  components: {
    Icon
  },

  data() {
    return {}
  },
  computed: {
    ...mapGetters(['callInfo', 'agentState', 'interval', 'skillList', 'queueSize', 'agentid', 'phonenum', 'agentInfo']),
    src() {
      return this.allow ? this.queueSize > 0 ? dyn.lineup : afterSign.lineup : beforeSign.lineup
    },
    srcset() {
      return this.allow ? this.queueSize > 0 ? dyn.lineup2x : afterSign.lineup2x : beforeSign.lineup2x
    },
    text() {
      return this.queueSize > 0 ? `排队中：${this.queueSize}人` : '排队'
    },
    allow() {
      const { sign } = this.agentState
      return sign
    }
  },
  methods: {
    // 话务条被单击
    iconClickHandle() {
      if (this.allow) {
        this.$router.push({ name: 'Queue' })
      }
    }
  }
}
</script>
<style lang="scss" module>
@import "@/styles/mixin.scss";
.queue {
  // position: relative;
  // .queueLine{
  //   color: red;
  //   font-size: 14px;
  //   text-align: center;
  //   position: absolute;
  //   width: 100px;
  //   left: 50%;
  //   bottom: 10px;
  //   transform: translateX(-50%);
  // }
}
.btn{
  @include flex($justify: flex-end);
}
</style>
